<template>
  <div id="load-box" :class="loadBoxLoaded ? 'loaded' : ''">
    <div class="load-bg">
      <img class="load-img" style="border-radius: 50%;" src="/src/assets/images/logo.png" alt="load-bg"/>
      <div class="load-image-dot"></div>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted} from 'vue';
import store from "../../store/index.js";
import theme from "../../utils/theme/index.js";

const loadBoxLoaded = computed(() => store.state.page.loadBoxLoaded);

onMounted(() => {
  theme.showLoadBox();
});
</script>

<style scoped>
#load-box .load-image-dot {
  width: 30px;
  height: 30px;
  background: #6bdf8f;
  position: absolute;
  border-radius: 50%;
  border: 6px solid #fff;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(18px, 24px);
  -moz-transform: translate(18px, 24px);
  -o-transform: translate(18px, 24px);
  -ms-transform: translate(18px, 24px);
  transform: translate(18px, 24px);
}

#load-box {
  -webkit-user-select: none;
}

#load-box .load-bg {
  display: flex;
  width: 100%;
  height: 100%;
  position: fixed;
  background: var(--heo-background);
  z-index: 1999;
  opacity: 1;
  transition: 0.2s;
  pointer-events: all;
  animation: showLoad 0.3s 0s backwards;
}

#load-box.loaded .load-bg {
  pointer-events: none;
  transition: 0.2s;
  animation: hideLoad 0.3s 0s forwards;
}

#load-box .load-img {
  width: 100px;
  margin: auto;
  animation-duration: 0.2s;
  animation-name: loadAction;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes loadAction {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.6;
  }
}

@keyframes hideLoad {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes showLoad {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
</style>